<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>电网矢量切片渲染(已弃用)</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/configData.js"></script>
    <script src="libs/axios.min.js"></script>
    <script src="libs/httpService.js"></script>
    <script src="js/demo.js"></script>
</head>

<body>
<div class="opt_panel">
    <button onclick="onStartDraw()">开始框选(默认矩形)</button>
    <button onclick="onEndDraw()">停止框选</button>
    <button onclick="onSetCacheId()">更新设置缓存标识</button>
</div>
<div id="map"></div>
<script>
    function onStartDraw() {
        //框选工具开启后的操作方式为：1.点击地图确定第一个点，2.移动鼠标改变矩形大小,3.点击鼠标确定第二个点
        selectTool.enable()
    }

    //关闭框选工具
    function onEndDraw() {
        selectTool.disable(true)
    }


    //示例说明：
    //该示例展示了如何加载电网矢量切片(pbf)，支持选择和捕捉（移动端暂不支持，待优化）
    mapOptions = {
        zoom: 18,
        center: [118.1678615033893, 24.5062746524231]
    }
    // egisV2.options.encryptPowerGridTile = false
    // tileOptions.layers = ['300000']
    function onSetCacheId() {
        //更新缓存标识之后，之前已经缓存过的切片数据如果再次进入视图会被再次请求
        gridTileLayer.setCacheId(Math.random())
    }
    function initPage() {
        egisV2.options.encryptPowerGridTile = false
        //设置鼠标滚轮的缩放步长（1表示每次缩放1级）
        // map.scrollZoom.setWheelZoomRate(1)
        //显示切片边界
        map.showTileBoundaries = true;
        initGridTileLayer()
        initSelectTool()
        map.egis.selectionSet.setAutoFlicker(true)
        map.egis.selectionSet.setSpeed(5)

        gridTileLayer.on('click',data => {
            //处理被点中的设备
            console.log('click---点击要素数:',data.features.length)
            console.log('click---点击事件对象:',data.event)
        })
        gridTileLayer.on('mouseenter',devData => {
            //移入设备
            console.log('enter---要素数:',devData.features.length)
            console.log('enter---图层ID:', devData.layerId)
        })
        gridTileLayer.on('mouseleave',devData => {
            //移出设备
            console.log('leave---图层ID:',devData.layerId)
        })




    }

    window.onload = function () {
        loadGeoMap_ms(initPage)
    }

</script>
</body>
</html>
